<template>
  <div class="top-bar flex-h">
    <div class="logo">
      <img :src="'img/logo.png'" class="logo-img" alt="logo-db-hub">
      <strong>DB_HUB</strong>
    </div>
    <div class="auto-flex">
      <div class="list-nav">
        <section
          v-for="(v, idx) in nav.list"
          :key="idx"
          :class="{on: v.com === $root.com}"
        >
          <a href="javascript:" class="block-a"
            @click="$root.setRouter({ com: v.com })"
          >{{v.name}}</a>
        </section>
      </div>
    </div>
    <div>
      <button class="btn btn-sm btn-success"
        v-if="$root.is.local"
        @click="$root.openFile($options.__file)"
      >打开组件</button>
    </div>
    <div style="display: flex;">
      <a class="block-a" target="_blank" 
        href="https://codding.cn"
      >技术支持: https://codding.cn</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-bar',
  computed: {
    nav() {
      return this.$root.nav
    }
  }
}
</script>

<style lang="less" scoped>
.top-bar {
  font-size: 16px;
  color: rgba(255, 255, 255, .5);
  background: #1f2123; white-space: nowrap;
  line-height: 3em; display: flex;
  user-select: none;
  padding-left: 1em;
  padding-right: .25em;
  .logo {
    cursor: pointer;
    position: relative;
    padding-left: 2em;
    color: #fff;
    .logo-img {
      width: 1.5em;
      position: absolute; left: 0; top: calc(1em - 4px);
    }
  }
  .on {color: #fff;}
  .block-a {
    padding: 0 .75em; display: block; cursor: pointer;
  }
  .list-nav {
    display: flex;
  }
}
</style>
